import React from 'react'

import axios from 'axios'

import './index.scss'

import { Carousel, Flex, Grid, WingBlank } from 'antd-mobile'

// 引入图片部分
import nav1 from '../../assets/images/nav-1.png'
import nav2 from '../../assets/images/nav-2.png'
import nav3 from '../../assets/images/nav-3.png'
import nav4 from '../../assets/images/nav-4.png'

// 导航菜单数据
const menus = [
  { id: 1, name: '整租', imgSrc: nav1, path: '/home/houselist' },
  { id: 2, name: '合租', imgSrc: nav2, path: '/home/houselist' },
  { id: 3, name: '地图找房', imgSrc: nav3, path: '/map' },
  { id: 4, name: '去出租', imgSrc: nav4, path: '/rent' }
]

class Index extends React.Component {
  state = {
    swipersData: [],
    imgHeight: 176,
    isSwiperLoaded: false,
    groups: [],
    news: [],
    currentName: ''
  }

  //获取顶部导航城市信息
  getCurrentCity() {
    const myCity = new window.BMap.LocalCity()
    myCity.get(async res => {
      // 根据城市名称判断是否有房源信息   # ++++
      // 有 => 返回该城市
      // 没有 => 返回默认城市 上海
      let info = await axios.get('http://localhost:8080/area/info', {
        params: {
          name: res.name
        }
      })

      const { label } = info.data.body
      this.setState({
        currentName: label
      })
    })
  }

  componentDidMount() {
    this.getSwiper()
    this.getGroups()
    this.getNews()
    this.getCurrentCity()
  }

  render() {
    return (
      <div>
        {/* 顶部导航 */}
        <Flex className="search-box">
          <Flex className="search-left">
            <div
              className="location"
              onClick={() => this.props.history.push('/citylist')}
            >
              <span>{this.state.currentName}</span>
              <i className="iconfont icon-arrow" />
            </div>
            <div
              className="search-form"
              onClick={() => this.props.history.push('/search')}
            >
              <i className="iconfont icon-seach" />
              <span>请输入小区或地址</span>
            </div>
          </Flex>
          <i
            className="iconfont icon-map"
            onClick={() => this.props.history.push('/map')}
          />
        </Flex>
        {/* 轮播图区域 */}
        <div className="swiper">
          {this.state.isSwiperLoaded && (
            <Carousel autoplay={true} infinite>
              {this.state.swipersData.map(val => (
                <a
                  key={val}
                  href="http://www.alipay.com"
                  style={{
                    display: 'inline-block',
                    width: '100%',
                    height: this.state.imgHeight
                  }}
                >
                  <img
                    src={`http://localhost:8080${val.imgSrc}`}
                    alt=""
                    style={{ width: '100%', verticalAlign: 'top' }}
                    onLoad={() => {
                      // fire window resize event to change height
                      window.dispatchEvent(new Event('resize'))
                      this.setState({ imgHeight: 'auto' })
                    }}
                  />
                </a>
              ))}
            </Carousel>
          )}
        </div>
        {/* 导航栏区域 */}
        <div className="nav">
          <Flex>{this.renderMenus()}</Flex>
        </div>
        {/* 租房小组 */}
        <div className="group">
          <h3 className="group-title">
            租房小组 <span className="more">更多</span>
          </h3>

          {/* 宫格组件 */}
          <Grid
            data={this.state.groups}
            columnNum={2}
            square={false}
            hasLine={false}
            renderItem={item => (
              <Flex className="group-item" justify="around" key={item.id}>
                <div className="desc">
                  <p className="title">{item.title}</p>
                  <span className="info">{item.desc}</span>
                </div>
                <img src={`http://localhost:8080${item.imgSrc}`} alt="" />
              </Flex>
            )}
          />
        </div>
        {/*  最新资讯 */}
        <div className="news">
          <h3 className="group-title">最新资讯</h3>
          <WingBlank size="md">{this.renderNews()}</WingBlank>
        </div>
      </div>
    )
  }

  // 渲染导航列表
  renderMenus() {
    return menus.map(item => (
      <Flex.Item
        key={item.id}
        onClick={() => this.props.history.push(item.path)}
      >
        <img src={item.imgSrc} alt="" />
        <p>{item.name}</p>
      </Flex.Item>
    ))
  }

  //  渲染最新资讯
  renderNews() {
    return this.state.news.map(item => (
      <div className="news-item" key={item.id}>
        <div className="imgwrap">
          <img
            className="img"
            src={`http://localhost:8080${item.imgSrc}`}
            alt=""
          />
        </div>
        <Flex className="content" direction="column" justify="between">
          <h3 className="title">{item.title}</h3>
          <Flex className="info" justify="between">
            <span>{item.from}</span>
            <span>{item.date}</span>
          </Flex>
        </Flex>
      </div>
    ))
  }

  //获取轮播图数据
  async getSwiper() {
    await axios.get('http://localhost:8080/home/swiper').then(res => {
      console.log(res)

      this.setState({
        swipersData: res.data.body,
        isSwiperLoaded: true
      })
    })
  }

  // 获取宫格部分数据
  async getGroups() {
    let res = await axios.get(
      'http://localhost:8080/home/groups?area=AREA%7C88cff55c-aaa4-e2e0'
    )

    this.setState({
      groups: res.data.body
    })
  }

  //获取最新资讯
  async getNews() {
    //2. 获取新闻数据
    let res = await axios.get(
      'http://localhost:8080/home/news?area=AREA%7C88cff55c-aaa4-e2e0'
    )
    this.setState({
      news: res.data.body
    })
  }
}
export default Index
